{{ define "document-processing" }}
<div class="space-y-6">
    <div id="documentUploadArea" 
         class="relative border-2 border-dashed rounded-lg p-6 transition-colors"
         :class="{ 
             'border-darkBorder hover:border-darkAccent bg-darkSurface': darkMode,
             'border-gray-300 hover:border-indigo-500 bg-gray-50': !darkMode 
         }">
        <div class="text-center space-y-4">
            <div class="space-y-2">
                <svg class="mx-auto h-12 w-12 transition-colors" 
                     :class="{ 'text-darkTextSecondary': darkMode, 'text-gray-400': !darkMode }"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <div class="flex flex-col items-center">
                    <label for="documentInput" class="relative cursor-pointer rounded-md font-medium focus-within:outline-none">
                        <span class="inline-flex items-center px-4 py-2 border text-sm rounded-full transition-colors"
                              :class="{ 
                                  'border-darkAccent text-darkAccent hover:bg-darkAccent/10': darkMode,
                                  'border-indigo-500 text-indigo-600 hover:bg-indigo-50': !darkMode 
                              }">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                            </svg>
                            选择文档
                        </span>
                    </label>
                    <p class="mt-2" :class="{ 'text-darkTextSecondary': darkMode, 'text-gray-500': !darkMode }">
                        或在此处拖放您的文档
                    </p>
                    <input id="documentInput" type="file" accept=".pdf,.doc,.docx,.odt,.rtf,.txt" class="sr-only">
                </div>
            </div>
            <div id="documentInfo" class="hidden">
                <div class="rounded-lg p-4 transition-colors" 
                     :class="{ 'bg-darkInput border border-darkBorder': darkMode, 'bg-gray-100': !darkMode }">
                    <p class="text-sm font-medium transition-colors" 
                       :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-900': !darkMode }">
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="p-6 rounded-lg shadow space-y-6 transition-colors"
         :class="{ 'bg-darkSurface border border-darkBorder': darkMode, 'bg-white': !darkMode }">
        <h3 class="text-lg font-medium" :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-900': !darkMode }">
            转换选项
        </h3>
        <div class="space-y-2">
            <label for="outputFormat" class="block text-sm font-medium"
                   :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                输出格式
            </label>
            <select id="outputFormat" name="format" 
                    class="mt-1 block w-full pl-3 pr-10 py-2 text-base rounded-md cursor-pointer transition-colors"
                    :class="{ 
                        'bg-darkInput border-darkBorder text-darkTextPrimary hover:bg-darkInputHover hover:border-darkAccent focus:bg-darkInputFocus focus:border-darkAccent focus:ring-1 focus:ring-darkAccent': darkMode,
                        'border-gray-300 focus:ring-indigo-500 focus:border-indigo-500': !darkMode 
                    }">
                <option value="pdf">PDF 文档 (.pdf)</option>
                <option value="docx">Word 文档 (.docx)</option>
                <option value="doc">Word 97-2003 文档 (.doc)</option>
                <option value="odt">开放标准文本 (.odt)</option>
                <option value="txt">纯文本 (.txt)</option>
                <option value="rtf">富文本格式 (.rtf)</option>
            </select>
        </div>
    </div>

    <button id="convertBtn" type="button" disabled 
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            :class="{ 
                'text-darkTextPrimary bg-darkAccent hover:bg-darkAccentHover focus:ring-darkAccent': darkMode,
                'text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500': !darkMode 
            }">
        转换文档
    </button>

    <div id="conversionProgress" class="hidden space-y-4">
        <div class="p-4 rounded-lg shadow transition-colors"
             :class="{ 'bg-darkSurface border border-darkBorder': darkMode, 'bg-white': !darkMode }">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium" 
                      :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                    正在转换文档
                </span>
            </div>
            <div class="w-full rounded-full h-2" 
                 :class="{ 'bg-darkInput': darkMode, 'bg-gray-200': !darkMode }">
                <div class="h-2 rounded-full transition-all duration-300" 
                     :class="{ 'bg-darkAccent': darkMode, 'bg-indigo-600': !darkMode }"
                     style="width: 0%">
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}